<template>
	<div class="recommend">
		<van-divider>热门推荐</van-divider>
		<!-- <ul>
        <li
            v-for="(item,index) in recommendList"
            :key="index"
			@click="goDetail(item.id)"
        >
            <h2>
                <img :src="item.img4" alt="">
            </h2>
            <div>
                <h3>{{item.name}}</h3>
                <p>{{item.title}}</p>
                <div class="price">
                    <span>¥</span>
                    <b>{{item.price}}</b>
                </div>
            </div>
        </li>
    </ul> -->

		<swiper class="swiper" :options="swiperOption">
			<swiper-slide class="slide-1" v-for="(item, index) in recommendList" :key="index" >
				<h2 >
					<img :src="item.img4" alt="" @click="goDetail(item.id)" >
				</h2>
				<div>
					<h3>{{ item.name }}</h3>
					<p>{{ item.title }}</p>
					<div class="price">
						<span>¥</span>
						<b>{{ item.price }}</b>
					</div>
				</div>
			</swiper-slide>

		</swiper>
	</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
	props: {
		recommendList: Array
	},
	components: {
		swiper,
		swiperSlide
	},
	data() {
		return {
			swiperOption: {
				effect: 'flip',
				grabCursor: true,
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				speed: 1000,
			}
		}
	},
	methods: {
		goDetail(id) {
			this.$router.push({
				path: '/detail',
				query: {
					id
				}
			})
		}
	}
}
</script>

<style scoped>
.recommend ul li {
	position: relative;
}

.slide-1 h2 {
	text-align: center;
}

.slide-1 img {
	width: 9.6rem;
	height: 3.84rem;
	border-radius: 12px;
}

.slide-1>div {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	padding: 0.533333rem;
}

.slide-1>div h3 {
	font-size: 12px;
	color: #ccc;
}

.slide-1>div p {
	font-size: 0.426666rem;
	color: #ccc;
}

.price {
	margin-top: 0.666666rem;
	font-size: 0.626666rem;
	text-align: right;
	color: #ccc;
}

.price span {
	font-size: 0.373333rem;
}

::v-deep .van-divider {
	font-size: 18px;
	border-color: #d4c0a7;
}
</style>
